<template>
  <div>
    <div class="u-df-st u-base-fg u-pl20 u-mb20">
      <el-radio-group v-model="radio" size="small" class="radio">
        <el-radio-button label="JC">监测机构</el-radio-button>
        <el-radio-button label="TG">托管机构</el-radio-button>
      </el-radio-group>
      <AreaForm
        ref="areaFormRef"
        :projectType="radio"
        :reset="reset"
        :propParams="true"
        @handleQuery="handleQuery"
        @resetQuery="resetQuery"
        :isStage="true"
        :showType="radio === 'TG' ? true : false"
        style="margin-bottom: 0px"
      />
    </div>
    <div class="chartsBox u-base-fg u-df-st u-p20">
      <div class="chartsLeft">
        <div class="u-df-spb">
          <div>对标分析</div>
          <!-- <DateChart
            ref="chartRef"
            class="u-p20 u-base-fg"
            style="height: 360px"
            :extraOpts="chartOpts"
            @handleDateParams="handleChart"
          /> -->
          <el-form :model="chartParams" :inline="true" class="echartsForm u-df-spb">
            <el-form-item>
              <el-form-item prop="energyType" class="u-mr10">
                <el-select
                  v-model="chartParams.energyType"
                  placeholder=""
                  size="mini"
                  style="width: 100px"
                  @change="searchQuery"
                >
                  <el-option
                    v-for="item in engTypes"
                    :key="item.id"
                    :label="item.energyName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item v-if="rangeType[chartParams.dateType].type !== 'yearrange'">
                <el-date-picker
                  v-model="dateRange"
                  :type="rangeType[chartParams.dateType].type ?? 'daterange'"
                  :key="rangeType[chartParams.dateType].type ?? 'daterange'"
                  :value-format="rangeType[chartParams.dateType].fmt ?? 'yyyy-MM-dd'"
                  :picker-options="rangeType[chartParams.dateType].pickerOptions"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  size="mini"
                  clearable
                  align="left"
                  style="width: 240px"
                  @change="dateChange"
                />
              </el-form-item>
              <el-form-item v-else>
                <el-date-picker
                  v-model="yearRange.sYear"
                  type="year"
                  value-format="yyyy"
                  :picker-options="pickerOptsStart"
                  placeholder="开始年份"
                  size="mini"
                  clearable
                  style="width: 115px"
                  class="u-mr5"
                  @change="yearChange"
                />
                <el-date-picker
                  v-model="yearRange.eYear"
                  type="year"
                  value-format="yyyy"
                  :picker-options="pickerOpts"
                  placeholder="结束年份"
                  size="mini"
                  clearable
                  style="width: 115px"
                  @change="yearChange"
                />
              </el-form-item>
            </el-form-item>
            <el-form-item prop="dateType" class="u-df-ct">
              <el-radio-group v-model="chartParams.dateType" size="mini">
                <el-radio-button label="d">日</el-radio-button>
                <el-radio-button label="m">月</el-radio-button>
                <el-radio-button label="y">年</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
        <CECharts
          ref="ceChart"
          v-loading="loading"
          type="line"
          :options="chartOpts"
          style="height: 360px"
          :onChartClick="chartClick"
        />
      </div>
      <div class="chartsRight">
        <div class="unitStyle">
          <span class="u-mr5">考核指标：{{ rulerDate }}</span>
          单位： {{ tabPosition === 'fxfx' ? '元' : unitList[chartParams.energyType] }}
        </div>
        <div class="rightBox">
          <ul class="rulerBox">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
          <ul class="rulerBox2">
            <li
              v-for="item in rulerList"
              :key="item.flag"
              class="rValue"
              :style="{ background: item.height ? item.bg : 'transparent', top: item.height }"
            >
              <div class="rLabel" v-if="item.height" :style="{ color: item.bg }">
                {{ item.label }}
                <span style="padding-left: 10px">{{ item.value }}</span>
              </div>
              <div class="rIntroduce" v-if="item.height">{{ item.introduce }}</div>
            </li>
          </ul>
        </div>
        <div style="font-size: 12px; margin-top: 35px; margin-left: -50px">
          结论：
          <span style="color: #15b7f1">{{ conclusion }}</span>
        </div>
      </div>
      <div v-show="radio === 'TG'" class="tabs">
        <el-tabs v-model="tabPosition">
          <el-tab-pane name="nhfx" label="能耗分析"></el-tab-pane>
          <el-tab-pane name="fxfx" label="费用分析"></el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="contBox">
      <div class="u-df-ed mb20">
        <el-button type="primary" plain size="small" @click="handleExport">导出</el-button>
      </div>
      <TableList
        v-loading="loading || loading2"
        :total="total"
        :height="500"
        :tableData="tableData"
        :pageObj="pageObj"
        :columObj="columObj"
        @getList="getList"
      >
        <template v-slot:bExceed="{ scope }">
          <span v-if="scope.row.energyBasisValue || scope.row.energyBasisValueGap">
            {{ scope.row.energyBasisValue | nullishCoalescing }}/{{ scope.row.energyBasisValueGap | nullishCoalescing }}
          </span>
          <span v-if="!scope.row.energyBasisValue && !scope.row.energyBasisValueGap">--</span>
        </template>
        <template v-slot:gExceed="{ scope }">
          <span v-if="scope.row.energyGuideValue || scope.row.energyGuideValueGap">
            {{ scope.row.energyGuideValue | nullishCoalescing }}/{{ scope.row.energyGuideValueGap | nullishCoalescing }}
          </span>
          <span v-if="!scope.row.energyGuideValue && !scope.row.energyGuideValueGap">--</span>
        </template>
        <template v-slot:uExceed="{ scope }">
          <span v-if="scope.row.energyUpperValue || scope.row.energyUpperValueGap">
            {{ scope.row.energyUpperValue | nullishCoalescing }}/{{ scope.row.energyUpperValueGap | nullishCoalescing }}
          </span>
          <span v-if="!scope.row.energyUpperValue && !scope.row.energyUpperValueGap">--</span>
        </template>
        <template v-slot:jzExceed="{ scope }">
          <span v-if="scope.row.energyBasisCost || scope.row.energyBasisCostGap">
            {{ scope.row.energyBasisCost | nullishCoalescing }}/{{ scope.row.energyBasisCostGap | nullishCoalescing }}
          </span>
          <span v-if="!scope.row.energyBasisCost && !scope.row.energyBasisCostGap">--</span>
        </template>
      </TableList>
    </div>
  </div>
</template>

<script setup>
import dayjs from 'dayjs';
import JBC from 'jsbi-calculator';
import { Message } from 'element-ui';
import { cloneDeep, pick, forEach, round, merge } from 'lodash-es';
import { useRequest } from '@/hooks/requestHooks';
import { useWatch } from '@/hooks/useWatch';
import { useDownload } from '@/hooks/tool.js';
import { usePickerOption } from '@/views/hooks';
import { useMain } from '@/store/app.js';
import { getByJCDateEnergyResult, getByTGDateEnergyResult, getEnergyList } from '@/api/index.js';
import { basicLineXAxis, basicLineYAxis } from '@/components/chart/options/baseOptions.js';
import { TableList } from '@/components/MainComponents.js';
import CECharts from '@/components/chart/CECharts.vue';
import AreaForm from '@/views/components/AreaForm.vue';

const { projectType } = useMain();
const columnData1 = [
  {
    text: true,
    prop: 'energyValueDate',
    label: '统计时间',
  },
  {
    text: true,
    prop: 'energyType',
    label: '能耗类型/' + 'KWh',
  },
  {
    text: true,
    prop: 'energyConsumeValue',
    label: '实际能耗量',
  },
  {
    slotName: 'bExceed',
    label: '基准值/超出量',
  },
  {
    text: true,
    prop: 'energyConsumeCost',
    label: '实际能耗费用（元）',
  },
  {
    slotName: 'jzExceed',
    label: '基准能耗费用/超出费用（元）',
  },
];
const columnData2 = [
  {
    text: true,
    prop: 'energyValueDate',
    label: '统计时间',
  },
  {
    text: true,
    prop: 'energyType',
    label: '能耗类型/' + 'KWh',
  },
  {
    text: true,
    prop: 'energyConsumeValue',
    label: '实际能耗量',
  },
  {
    slotName: 'bExceed',
    label: '基准值/超出量',
  },
  {
    slotName: 'gExceed',
    label: '引导值/超出量',
  },
  {
    slotName: 'uExceed',
    label: '上限值/超出量',
  },
];
const dimensions0 = [
  'energyValueDate',
  { name: 'energyConsumeValue', displayName: '实际能耗' },
  { name: 'energyBasisValue', displayName: '基准能耗' },
];
const dimensions1 = [
  'energyValueDate',
  { name: 'energyConsumeCost', displayName: '实际能耗费用' },
  { name: 'energyBasisCost', displayName: '基准能耗费用' },
];
const dimensions2 = [
  'energyValueDate',
  { name: 'energyConsumeValue', displayName: '实际能耗' },
  { name: 'energyGuideValue', displayName: '引导值能耗' },
  { name: 'energyBasisValue', displayName: '基准能耗' },
  { name: 'energyUpperValue', displayName: '约束值能耗' },
];
const { calculator } = JBC;
const radio = ref(projectType);
const rangeType = ref({
  d: {
    type: 'daterange',
    fmt: 'yyyy-MM-dd',
    default: [dayjs().subtract(30, 'day').format('YYYY-MM-DD'), dayjs().subtract(1, 'day').format('YYYY-MM-DD')],
    pickerOptions: usePickerOption('d'),
  },
  m: {
    type: 'monthrange',
    fmt: 'yyyy-MM',
    // default: [],
    default: [dayjs().subtract(6, 'month').format('YYYY-MM'), dayjs().subtract(1, 'month').format('YYYY-MM')],
    pickerOptions: usePickerOption('m'),
  },
  y: {
    type: 'yearrange',
    fmt: 'yyyy',
    // default: [],
    default: [dayjs().subtract(2, 'year').format('YYYY'), dayjs().format('YYYY')],
  },
});
const dateRange = ref(rangeType.value.d.default);
const yearRange = ref({ sYear: null, eYear: null });
const total = ref(0);
const tableData = ref([]);
const reset = ref(0);
const tabPosition = ref('nhfx');
const chartParams = ref({
  inId: null,
  energyType: 2,
  // energyType: 0,
  dateStart: dateRange.value[0] ?? '',
  dateEnd: dateRange.value[1] ?? '',
  dateType: 'd',
  projectType: radio.value,
});
// const engTypes = [
//   { value: 'ELECTRICITY', label: '电', unit: 'KWh' },
//   { value: 'WATER', label: '水', unit: 't' },
//   { value: 'AIR', label: '气', unit: 'm³' },
//   { value: 'WARM', label: '暖', unit: 'KJ' },
// ];
const engTypes = ref([]);
const unitList = ref(null);
// const unitList = {
//   ELECTRICITY: 'KWh',
//   WATER: 't',
//   AIR: 'm³',
//   WARM: 'KJ',
// };
useRequest(getEnergyList, {
  defaultParams: [{ pageNum: 1, pageSize: 10 }],
  onSuccess: res => {
    engTypes.value = res.rows;
    let obj = {};
    forEach(res?.rows, n => {
      obj[n.id] = n.energyUnit;
    });
    unitList.value = obj;
  },
});

const pageObj = ref({
  pageNum: 1,
  pageSize: 10,
});
const columObj = ref({
  columnData: [],
});
const ceChart = ref(null);
const chartOpts = ref({
  grid: {
    bottom: '10%',
    top: '16%',
    left: '5%',
    right: '5%',
    containLabel: true,
  },
  color: ['#4992ff', '#22edcb', '#eda422', '#d222ed'],
  // xAxis: { ...basicLineXAxis },
  yAxis: [
    merge({}, basicLineYAxis, {
      name: '单位：KWh',
    }),
    { ...basicLineYAxis },
  ],
  // xAxis: [{ triggerEvent: true }, { triggerEvent: true }],
  series: [],
  dataset: {
    dimensions: [],
    source: [],
  },
  dataZoom: [{ xAxisIndex: [0, 1] }, { xAxisIndex: [0, 1] }],
});
const rulerDate = ref('-');
const conclusion = ref('-');
const rulerList = ref(null);
const rulerList1 = ref([
  {
    bg: '#d222ed',
    label: '约束值',
    flag: 'energyUpperValue',
    value: '',
    height: null,
    introduce: '加大指标约束度，要求其至约束值以下',
  },
  {
    bg: '#4992ff',
    label: '实际值',
    value: '',
    flag: 'energyConsumeValue',
    height: null,
  },
  {
    bg: '#22edcb',
    label: '引导值',
    value: '',
    flag: 'energyGuideValue',
    height: null,
    introduce: '维持上年度指标不变，鼓励其达到引导值',
  },
  {
    bg: '#eda422',
    label: '基准值',
    flag: 'energyBasisValue',
    value: '',
    height: null,
    introduce: '参照基准值设定指标，督促其达到基准值',
  },
]);
const rulerList2 = ref([
  {
    bg: '#4992ff',
    label: '实际能耗',
    value: '',
    flag: 'energyConsumeValue',
    height: null,
  },

  {
    bg: '#22edcb',
    label: '基准值',
    flag: 'energyBasisValue',
    value: '',
    height: null,
    introduce: '参照基准值设定指标，督促其达到基准值',
  },
]);
const rulerList3 = ref([
  {
    bg: '#4992ff',
    label: '实际能耗费用',
    value: '',
    flag: 'energyConsumeCost',
    height: null,
  },

  {
    bg: '#22edcb',
    label: '基准能耗费用',
    flag: 'energyBasisCost',
    value: '',
    height: null,
    introduce: '参照基准值设定指标，督促其达到基准值',
  },
]);

// 开始时间不能大于结束时间
const pickerOptsStart = ref({
  disabledDate: time => {
    if (yearRange.value.eYear) {
      return (
        dayjs(time) > dayjs(yearRange.value.eYear) || dayjs(time) < dayjs(yearRange.value.eYear).subtract(2, 'year')
      );
    }
  },
});
// 结束时间不能小于开始时间
const pickerOpts = ref({
  disabledDate: time => {
    return dayjs(time) < dayjs(yearRange.value.sYear) || dayjs(time) > dayjs(yearRange.value.sYear).add(2, 'year');
  },
});
const [, loading, run] = useRequest(getByJCDateEnergyResult, {
  manual: true,
  onSuccess: async res => {
    chartOpts.value.dataset.source = res?.data ?? [];
    total.value = res.data?.length;

    tableData.value = res?.data?.slice(0, 10) ?? [];
    chartOpts.value.yAxis[0].name = `单位：${
      chartParams.value.energyType ? unitList.value[chartParams.value.energyType] : ''
    }`;
    let obj = cloneDeep(res?.data[0]);
    rulerDate.value = obj?.energyValueDate;
    conclusion.value = obj?.conclusion;
    let arr = pick(obj, [
      'energyUpperValue',
      'energyConsumeValue',
      'energyGuideValue',
      'energyBasisValue',
      'energyConsumeCost',
      'energyBasisCost',
    ]);

    await nextTick(() => {
      setTimeout(() => {
        const rulerHeight = ceChart.value.$$chart.getModel().getComponent('yAxis').axis.scale._extent[1];
        const eachHeight = calculator(`250/${rulerHeight}`);
        forEach(rulerList1.value, n => {
          for (let key in arr) {
            if (key === n.flag) {
              n.height =
                arr[key] && arr[key] > 0
                  ? calculator(`250-${round(calculator(`${arr[key]}*${eachHeight}`))}`) + 'px'
                  : null;
              n.value = arr[key];
            }
          }
        });
        rulerList.value = rulerList1.value;
      }, 1000);
    });
  },
});
const [, loading2, run2] = useRequest(getByTGDateEnergyResult, {
  manual: true,
  onSuccess: async res => {
    chartOpts.value.dataset.source = res?.data;
    total.value = res.data?.length;

    tableData.value = res.data?.slice(0, 10) ?? [];
    chartOpts.value.yAxis[0].name = `单位：${
      chartParams.value.energyType ? unitList.value[chartParams.value.energyType] : ''
    }`;
    let obj = cloneDeep(res?.data[0]);
    rulerDate.value = obj?.energyValueDate;
    conclusion.value = obj?.conclusion;
    let arr = pick(obj, [
      'energyUpperValue',
      'energyConsumeValue',
      'energyGuideValue',
      'energyBasisValue',
      'energyConsumeCost',
      'energyBasisCost',
    ]);
    await nextTick(() => {
      setTimeout(() => {
        const rulerHeight = ceChart.value.$$chart.getModel().getComponent('yAxis').axis.scale._extent[1];
        const eachHeight = calculator(`250/${rulerHeight}`);
        if (tabPosition.value === 'nhfx') {
          forEach(rulerList2.value, n => {
            for (let key in arr) {
              if (key === n.flag) {
                n.height =
                  arr[key] && arr[key] > 0
                    ? calculator(`250-${round(calculator(`${arr[key]}*${eachHeight}`))}`) + 'px'
                    : null;
                n.value = arr[key];
              }
            }
          });
          rulerList.value = rulerList2.value;
        } else {
          forEach(rulerList3.value, n => {
            for (let key in arr) {
              if (key === n.flag) {
                n.height =
                  arr[key] && arr[key] > 0
                    ? calculator(`250-${round(calculator(`${arr[key]}*${eachHeight}`))}`) + 'px'
                    : null;
                n.value = arr[key];
              }
            }
          });
          rulerList.value = rulerList3.value;
        }
      }, 1000);
    });
  },
});
const searchQuery = () => {
  // if (
  //   chartParams.value.buildingCode &&
  //   chartParams.value.energyType &&
  //   chartParams.value.dateStart &&
  //   chartParams.value.dateEnd
  // ) {
  forEach(rulerList.value, n => {
    n.value = '';
    n.height = null;
  });
  pageObj.value = {
    pageNum: 1,
    pageSize: 10,
  };
  if (chartParams.value.inId) {
    columObj.value.columnData[1].label = '能耗类型/' + unitList.value[chartParams.value.energyType];
    if (radio.value === 'JC') {
      if (chartParams.value.dateType === 'y') {
        if (yearRange.value?.sYear?.length > 0 && yearRange.value?.eYear?.length > 0) {
          run(chartParams.value);
        }
      } else {
        run(chartParams.value);
      }
    } else {
      if (chartParams.value.dateType === 'y') {
        if (yearRange.value?.sYear?.length > 0 && yearRange.value?.eYear?.length > 0) {
          run2(chartParams.value);
        }
      } else {
        run2(chartParams.value);
      }
    }
  }

  // } else {
  //   Message.warning('请选择机构名称/能耗类型/日期范围');
  // }
};
const dateChange = val => {
  chartParams.value.dateStart = val?.[0] ?? null;
  chartParams.value.dateEnd = val?.[1] ?? null;
  searchQuery();
};
const yearChange = () => {
  chartParams.value.dateStart = yearRange.value.sYear;
  chartParams.value.dateEnd = yearRange.value.eYear;
  searchQuery();
};
const handleQuery = queryParams => {
  forEach(rulerList.value, n => {
    n.height = null;
  });
  chartParams.value.inId = queryParams?.buildingCode?.enterpriseCode ?? null;
  // chartParams.value.inId = 'td_rule_in_id';
  searchQuery();
};
const resetQuery = () => {
  forEach(rulerList.value, n => {
    n.height = null;
  });
  dateRange.value = rangeType.value.d.default;
  yearRange.value = { sYear: null, eYear: null };
  chartParams.value = {
    inId: null,
    energyType: 2,
    dateStart: dateRange.value[0],
    dateEnd: dateRange.value[1],
    dateType: 'd',
    projectType: radio.value,
  };
  total.value = 0;
  chartOpts.value.dataset.source = [];
  tableData.value = [];
  searchQuery();
};
const getList = e => {
  pageObj.value.pageNum = e.page;
  pageObj.value.pageSize = e.limit;
  tableData.value = chartOpts.value.dataset?.source.slice((e.page - 1) * e.limit, e.page * e.limit);
};

const chartClick = param => {
  rulerDate.value = param?.data?.energyValueDate;
  conclusion.value = param?.data?.conclusion;
  let arr = pick(param?.data, [
    'energyUpperValue',
    'energyConsumeValue',
    'energyGuideValue',
    'energyBasisValue',
    'energyConsumeCost',
    'energyBasisCost',
  ]);
  const rulerHeight = ceChart.value.$$chart.getModel().getComponent('yAxis').axis.scale._extent[1];
  const eachHeight = calculator(`250/${rulerHeight}`);
  if (radio.value === 'JC') {
    forEach(rulerList1.value, n => {
      for (let key in arr) {
        if (key === n.flag) {
          n.height =
            arr[key] && arr[key] > 0
              ? calculator(`250-${round(calculator(`${arr[key]}*${eachHeight}`))}`) + 'px'
              : null;
          n.value = arr[key];
        }
      }
    });
    rulerList.value = rulerList1.value;
  } else {
    if (tabPosition.value === 'nhfx') {
      forEach(rulerList2.value, n => {
        for (let key in arr) {
          if (key === n.flag) {
            n.height =
              arr[key] && arr[key] > 0
                ? calculator(`250-${round(calculator(`${arr[key]}*${eachHeight}`))}`) + 'px'
                : null;
            n.value = arr[key];
          }
        }
      });
      rulerList.value = rulerList2.value;
    } else {
      forEach(rulerList3.value, n => {
        for (let key in arr) {
          if (key === n.flag) {
            n.height =
              arr[key] && arr[key] > 0
                ? calculator(`250-${round(calculator(`${arr[key]}*${eachHeight}`))}`) + 'px'
                : null;
            n.value = arr[key];
          }
        }
      });
      rulerList.value = rulerList3.value;
    }
  }
};
const handleExport = () => {
  const downloadUrl =
    radio.value === 'JC'
      ? '/energyservice/NewOverviewController/getDiagnosisMonitorExcelResult'
      : '/energyservice/NewOverviewController/getDiagnosisTrusteeshipExcelResult';
  useDownload(downloadUrl, chartParams.value, `能效诊断报表.xlsx`);
};

useWatch(
  () => chartParams.value.dateType,
  (n, o) => {
    if (n !== o) {
      if (n !== 'y') {
        dateRange.value = rangeType.value[n].default;
        chartParams.value.dateStart = dateRange.value[0] ?? '';
        chartParams.value.dateEnd = dateRange.value[1] ?? '';
      } else {
        yearRange.value.sYear = rangeType.value.y.default[0] ?? '';
        yearRange.value.eYear = rangeType.value.y.default[1] ?? '';
        chartParams.value.dateStart = yearRange.value.sYear ?? '';
        chartParams.value.dateEnd = yearRange.value.eYear ?? '';
      }
      total.value = 0;
      chartOpts.value.dataset.source = [];
      tableData.value = [];
      forEach(rulerList.value, n => {
        n.height = null;
      });
      rulerDate.value = null;
      conclusion.value = null;
      searchQuery();
    }
  },
);
useWatch(
  radio,
  n => {
    reset.value = reset.value + 1;
    chartParams.value.buildingCode = null;
    chartParams.value.projectType = n;
    columObj.value.columnData = n === 'JC' ? columnData2 : columnData1;
    if (n === 'JC') {
      chartOpts.value.dataset.dimensions = dimensions2;
    } else {
      chartOpts.value.dataset.dimensions = tabPosition.value === 'nhfx' ? dimensions0 : dimensions1;
    }
  },
  { immediate: true },
);
useWatch(
  chartOpts.value.dataset,
  n => {
    chartOpts.value.series = Array.from({ length: n.dimensions.length - 1 }, (_, idx) => {
      return idx === 0
        ? {
            type: 'bar',
            barWidth: 25,
            yAxisIndex: 0,
          }
        : {
            type: 'line',
            smooth: true,
            showSymbol: false,
            yAxisIndex: 0,
          };
    });
  },
  { deep: true },
);
useWatch(
  tabPosition,
  n => {
    let obj = cloneDeep(chartOpts.value.dataset.source[0]);
    nextTick(() => {
      setTimeout(() => {
        rulerDate.value = obj?.energyValueDate;
        conclusion.value = obj?.conclusion;
        let arr = pick(obj, [
          'energyUpperValue',
          'energyConsumeValue',
          'energyGuideValue',
          'energyBasisValue',
          'energyConsumeCost',
          'energyBasisCost',
        ]);
        const rulerHeight = ceChart.value.$$chart.getModel().getComponent('yAxis').axis.scale._extent[1];
        const eachHeight = calculator(`250/${rulerHeight}`);
        if (n === 'nhfx') {
          forEach(rulerList2.value, n => {
            for (let key in arr) {
              if (key === n.flag) {
                n.height =
                  arr[key] && arr[key] > 0
                    ? calculator(`250-${round(calculator(`${arr[key]}*${eachHeight}`))}`) + 'px'
                    : null;
                n.value = arr[key];
              }
            }
          });
          rulerList.value = rulerList2.value;
        } else {
          forEach(rulerList3.value, n => {
            for (let key in arr) {
              if (key === n.flag) {
                n.height =
                  arr[key] && arr[key] > 0
                    ? calculator(`250-${round(calculator(`${arr[key]}*${eachHeight}`))}`) + 'px'
                    : null;
                n.value = arr[key];
              }
            }
          });
          rulerList.value = rulerList3.value;
        }
      }, 1000);
    });

    chartOpts.value.dataset.dimensions = n === 'nhfx' ? dimensions0 : dimensions1;
    chartOpts.value.yAxis[0].name =
      n === 'nhfx'
        ? `单位：${chartParams.value.energyType ? unitList.value[chartParams.value.energyType] : ''}`
        : `单位：元`;
    rulerList.value = null;
    rulerDate.value = '-';
    conclusion.value = '-';
  },

  // { immediate: true },
);
</script>

<style lang="scss" scoped>
.echartsForm :deep(.el-form-item) {
  margin-bottom: 0;
}
.u-pl20 {
  padding-left: 20px;
}
.chartsBox {
  height: 430px;
  position: relative;
}
.chartsLeft {
  width: 65%;
  margin-right: 7%;
  height: 100%;
}
.chartsRight {
  width: 35%;
  height: 100%;
  .unitStyle {
    margin-top: 42px;
    margin-bottom: 30px;
    margin-left: -20px;
  }
}
.rightBox {
  position: relative;
  .rulerBox {
    height: 250px;
    width: 20px;
    border-left: 1px solid #000;
    border-top: 1px solid #000;
    // border-bottom: 1px solid #000;
    li {
      border-bottom: 1px solid #000;
      height: 20%;
    }
  }
  .rulerBox2 {
    position: absolute;
    top: 0;
    height: 250px;
    width: 100px;
  }
  .rValue {
    position: absolute;
    top: 0;
    height: 5px;
    width: 50px;
  }
  .rLabel {
    transform: translate(-120px, -5px);
    font-size: 12px;
    width: 120px;
  }
  .rIntroduce {
    transform: translate(70px, -20px);
    font-size: 12px;
    width: 400px;
  }
}
.app-light .chartsRight .rulerBox,
.app-light .chartsRight .rulerBox li {
  border-color: #000;
  color: #000;
}
.app-dark .chartsRight .rulerBox,
.app-dark .chartsRight .rulerBox li {
  border-color: #fff;
  color: #fff;
}
.tabs {
  position: absolute;
  right: 20px;
  top: 20px;
}
</style>
